<template>
	<view class="container">
		<view class="main">
			<view class="my-star">
				<text>评分</text>
				<view class="star">
					<view>
						<image v-for="(item, index) in 5" :key="index" @click="handleStar(index)" src="http://images.linglinggong.net/icon1/18.png" mode="aspectFill"></image>
					</view>
					<view>
						<image v-for="(item, index) in (evaluate.score)" :key="index" @click="handleStar(index)" src="http://images.linglinggong.net/icon1/19.png" mode="aspectFill"></image>
					</view>
				</view>
				
				<text>{{ evaluate.score }}星</text>
			</view>
			
			<!-- 填写评论 -->
			<view class="submit-content">
				<textarea v-model="evaluate.appraise" placeholder-style="color: rgba(64,33,16,0.50)" placeholder="多行输入..."/>
			</view>
		</view>
		
		<!-- 发布按钮 -->
		<view class="submit" @click="handleSubmit">发布</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				flagOpen: true,//防止重复点击
				evaluate: {
					  "appraise": "",
					  "orderId": 0,
					  "score": 0,
					  "type": 0,
					},
			}
		},
		methods: {
			
			//发布评论
			async handleSubmit () {
				if (!this.flagOpen) return
				this.flagOpen = false
				setTimeout(() => { this.flagOpen = true }, 1000)
				if(!this.evaluate.score) return uni.showToast({ title: '请打分~', icon: 'none' })
				if(!this.evaluate.appraise) return uni.showToast({ title: '请输入评价~', icon: 'none' })
				console.log(this.evaluate)
				let res = await this.$fetch(this.$api.order_evaluate, this.evaluate, 'POST', 'JSON')
				if (res.code) return uni.showToast({ title: res.msg, icon: 'none' })
				uni.showToast({ title: '评价发布成功~', icon: 'none' })
				if(uni.getStorageSync('userType') == 1) {
					setTimeout(() => { uni.navigateBack({ delta: 1 }) }, 800)
				}else {
					setTimeout(() => { uni.navigateBack({ delta: 1 }) }, 800)
					// setTimeout(() => { uni.redirectTo({ url: '/pages/my-job/my-job' }) }, 800)
				}
			},
			
			//评分
			handleStar(index) {
				this.evaluate.score = index + 1
			},
		},
		onLoad(options) {
			this.evaluate.orderId = options.orderId
			this.evaluate.type = options.type
		}
	}
</script>

<style lang="less" scoped>
.container {
	overflow: hidden;
	& > .main {
		position: relative;
		margin-top: 30rpx;
		background-color: #FFFFFF;
		padding-bottom: 48rpx;
		.my-star {
			// border: 1px solid #000000;
			display: flex;
			align-items: center;
			height: 40rpx;
			padding: 30rpx;
			& > text:first-child {
				margin-right: 56rpx;
			}
			& > text:last-child {
				color: rgba(64,33,16,0.50);
				letter-spacing: 0;
			}
			& > .star {
				position: relative;
				& > view {
					display: flex;
					& > image {
						margin-right: 32rpx;
						width: 36rpx;
						height: 36rpx;
					}
				}
				
				& > view:last-child {
					position: absolute;
					top: 0;
				}
			}
		}
		& > .submit-content {
			padding: 30rpx;
			display: flex;
			flex-direction: column;
			
			textarea {
				width: 690rpx;
				height: 400rpx;
				font-size: 14px;
			}
		}
	}
	& > .submit {
		position: fixed;
		bottom: 0;
		width: 100vw;
		height: 100rpx;
		background: #FCC928;
		display: flex;
		justify-content: center;
		align-items: center;
		
		&:active {
			opacity: 0.7;
		}
	}
}
	
</style>
